﻿@page "/scheduler/date-header"

@using Syncfusion.Blazor.Schedule
@using System.Globalization
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This demo depicts the way to add images and custom text to the date header bar by using the date header template option.</p>
</SampleDescription>
<ActionDescription>
    <p>In this demo, the <code>DateHeaderTemplate</code> option is used to customize the date header cells of day, week and workweek views. In month view, the date header is not applicable.   </p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" CssClass="schedule-date-header-template" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleTemplates>
                <DateHeaderTemplate>
                    <div class="date-text">@(getDateHeaderText((context as TemplateContext).Date))</div>
                    @{
                        @switch ((int)(context as TemplateContext).Date.DayOfWeek)
                        {
                            case 0:
                                <img class="weather-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/weather-clear.svg")" /><div class="weather-text">25&deg;C</div>
                                break;
                            case 1:
                                <img class="weather-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/weather-clouds.svg")" /><div class="weather-text">18&deg;C</div>
                                break;
                            case 2:
                                <img class="weather-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/weather-rain.svg")" /><div class="weather-text">10&deg;C</div>
                                break;
                            case 3:
                                <img class="weather-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/weather-clouds.svg")" /><div class="weather-text">16&deg;C</div>
                                break;
                            case 4:
                                <img class="weather-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/weather-rain.svg")" /><div class="weather-text">8&deg;C</div>
                                break;
                            case 5:
                                <img class="weather-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/weather-clear.svg")" /><div class="weather-text">27&deg;C</div>
                                break;
                            case 6:
                                <img class="weather-image" src="@UriHelper.ToAbsoluteUri($"images/scheduler/weather-clouds.svg")" /><div class="weather-text">17&deg;C</div>
                                break;
                        }
                    }
                </DateHeaderTemplate>
            </ScheduleTemplates>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>

@code {
    private DateTime CurrentDate = new DateTime(2020, 1, 9);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
    public static string getDateHeaderText(DateTime date)
    {
        return date.ToString("dd ddd", CultureInfo.InvariantCulture);
    }
}
<style>
    .schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {
        padding: 0;
        text-align: center !important;
    }

    .schedule-date-header-template.e-schedule .date-text {
        font-size: 14px;
    }

    .schedule-date-header-template.e-schedule.e-device .date-text {
        font-size: 12px;
    }

    .schedule-date-header-template.e-schedule .weather-image {
        width: 20px;
        height: 20px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .schedule-date-header-template.e-schedule .weather-text {
        font-size: 11px;
    }
</style>